<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-problemType="{scope}">
				{{ scope.row.categoryId }}
			</template>
			<template #table-column-status="{scope}">
				<span v-if="scope.row.status == 1" style="color:#22DE48">启用</span>
				<span v-if="scope.row.status == 0" style="color:#A2A4BA">关闭</span>
			</template>
			<template #table-column-content="{scope}">
				<div v-html="scope.row.content"></div>
			</template>
			<template #slot-delete="{scope}">
				<del-btn @del="crud.delete(scope.row)"></del-btn>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
import addType from './components/add-type';
import stores from '@/utils/store';
import platform from '@/mixin/platform';

export default {
	data() {
		return {
			crud: null,
			options: []
		};
	},
	mixins: [platform],
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.FAQMenagement.faqList)
				.set('dict', {
					label: {
						add: '添加用户问题',
						delete: '批量删除'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'selection',
							align: 'center',
							width: 60
						},
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '问题类型',
							prop: 'problemType',
							align: 'center'
						},
						{
							label: '标题',
							prop: 'title',
							align: 'center'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						}
					],

					op: {
						layout: ['edit', 'slot-delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '90px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							label: '问题类型',
							prop: 'categoryId',
							span: 10,
							component: {
								name: 'el-select',
								props: {
									placeholder: '请选择问题类型',
									filterable: true,
									'default-first-option': true,
									clearable: true
								},
								options: []
							},
							rules: {
								required: true,
								message: '问题类型'
							}
						},
						{
							props: {
								'label-width': '0px'
							},
							span: 4,
							component: {
								name: 'click-add-type',
								components: {
									addType
								},
								methods: {
									open() {
										this.$refs['add-type'].selectType();
									},
									onNew(arr) {
										console.log(arr);
										// 调接口 更新数据
										app.setData(
											'upsert.items[prop:categoryId].component.options',
											arr.map(e => {
												return {
													label: e.name,
													value: e.id
												};
											})
										);
									}
								},
								render() {
									return (
										<div>
											<add-type
												ref="add-type"
												on-new-type={this.onNew}></add-type>
											<el-button
												on-click={this.open}
												plain
												type="primary"
												size="small"
												style="margin-left:20px">
												新建类型
											</el-button>
										</div>
									);
								}
							}
						},
						{
							label: '标题',
							prop: 'title',
							span: 20,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入标题'
								}
							},
							rules: {
								required: true,
								message: '请输入标题'
							}
						},
						{
							label: '内容',
							prop: 'content',
							span: 24,
							component: {
								name: 'cl-editor-quill',
								props: {
									height: '200px'
								}
							}
						},
						{
							label: '是否启用',
							prop: 'status',
							value: true,
							component: {
								name: 'el-switch'
							}
						}
					]
				})
				.on('open', async (isEdit, data) => {
					let categoryList = await this.$service.FAQMenagement.faqCategory.list();
					app.setData(
						'upsert.items[prop:categoryId].component.options',
						categoryList.map(e => {
							return {
								label: e.name,
								value: e.id
							};
						})
					);
					if (isEdit) {
						data.categoryId = data.categoryId.toString();
						this.crud.setForm('status', data.status == 1 ? true : false);
					}
				})
				.on('refresh', async (params, { next }) => {
					let { list } = await next(params);
					let categoryList = await this.$service.FAQMenagement.faqCategory.list();
					list.map(m => {
						m.categoryId = categoryList.filter(
							v => v.id == m.categoryId.toString()
						)[0].name;
					});
				})
				.on('submit', async (isEdit, data, { next }) => {
					if (isEdit) {
						let status = data.status ? '1' : '0';
						delete data.status;
						delete data.createTime;
						delete data.updateTime;
						next({
							...data,
							status,
							app: stores.get('platForm') || 'yzf'
						});
					} else {
						let status = data.status ? '1' : '0';
						delete data.status;
						next({
							...data,
							status,
							app: stores.get('platForm') || 'yzf'
						});
					}
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'multi-delete-btn', 'query', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh();
		}
	}
};
</script>

<style lang="stylus" scoped>
.sales-top {
	color: red;
}

.sales-bottom {
	color: green;
}
</style>

<style lang="stylus"></style>
